// Component:		  Variables
//
// Description:         Pomelo-UI Variables
//
// =============================================================================

$ns:  unquote("") !default;  //取消默认前缀

$utility:  unquote("pull-") !default;  //补助类SCSS型前缀



// Global variables
// =============================================================================


// Black - White - Gray
// -----------------------------------------------------------------------------

$black:            #000 !default;
$white:            #fff !default;

$gray-darker:     lighten($black, 13.5%); // #222
$gray-dark:       lighten($black, 20%);   // #333
$gray:            lighten($black, 33.5%); // #555
$gray-light:      lighten($black, 60%);   // #999
$gray-lighter:    lighten($black, 93.5%); // #eee


// Brand Colors
// -----------------------------------------------------------------------------

$global-primary: 	    #0e90d2; // #157EFB; //#428bca !default;
$global-secondary:     lighten($global-primary, 15%) !default;
$global-success: 	    #5eb95e; // #53D76A; //#5cb85c !default;
$global-warning: 	    #F37B1D; // #FD9426; // #f0ad4e !default;
$global-danger: 		    #dd514c; // #FC3159; //#da314b !default;
$global-info:          $global-secondary !default;


// One
// -----------------------------------------------------------------------------

$one-primary:  #15afef !default;


// body
// -----------------------------------------------------------------------------

$body-bg:                $white !default;
$text-color:             $gray-dark !default;


// Links
// -----------------------------------------------------------------------------

$link-color:               $global-primary !default;
$link-hover-color:         darken($link-color, 15%) !default;

$global-contrast-color: 	  $white !default;


// Backgrounds & Borders
// -----------------------------------------------------------------------------

$global-background: 				$white !default;
$global-border: 					  #ddd !default;


// Typography
// =============================================================================

// Font family
// -----------------------------------------------------------------------------

// FreeSans: Ships with many Linux distros, including Ubuntu
// Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
//        Arial to get picked up by the browser, even though neither is available
//        in Chrome OS.
// Droid Sans: Ships with all versions of Android.
// Roboto: Android new font-family from Android ISC
// Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
// Helvetica Neue: iOS & OS X 10.10 UI font (not Lucida Grande any more)
//                 http://morrick.me/archives/6873
// http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

// Helvetica

// apple.com: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana,

$font-family-sans-serif:   "Microsoft YaHei", FreeSans, Arimo, "Segoe UI", "Lucida Grande", Helvetica, Arial,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB", "Hiragino Sans GB W3", "FontAwesome", sans-serif !default;

$font-family-serif: Georgia, "Times New Roman", Times, SimSun, "FontAwesome", serif; //FangSong, STFangSong

$font-family-monospace:  Monaco, Menlo, Consolas, "Courier New", "FontAwesome", monospace !default;

$font-family-kai:  Georgia, "Times New Roman", Times, Kai, "Kaiti SC", KaiTi, BiauKai, "FontAwesome", serif !default;


// Font  size
// -----------------------------------------------------------------------------

$global-font-size:				1.6rem; //16px
$global-line-height: 			1.6 !default;
$font-size-base:           $global-font-size !default;

$line-height-base:         $global-line-height !default;
$line-height-computed:    floor($font-size-base * $line-height-base); // 2


$font-size-xxs:           $global-font-size - 0.6; // 10px - 1rem
$font-size-xs:            $global-font-size - 0.4; // 12px
$font-size-sm:            $global-font-size - 0.2; // 14px
//$font-size-default:     $global-font-size;       // 16px
$font-size-lg:            $global-font-size + 0.2; // 18px
$font-size-xl:            $global-font-size + 0.8; // 24px
$font-size-xxl:           $global-font-size * 2;   // 32px
$font-size-xxxl:          $global-font-size * 2 + 1; // 42px


// Global spacing
// =============================================================================

$global-spacing:                 1.6rem !default;

$global-spacing-xs:              0.5rem !default;
$global-spacing-sm:              1rem !default;
$global-spacing-lg:              2.4rem !default;
$global-spacing-xl:              3.2rem !default;


// Margin
// -----------------------------------------------------------------------------

$global-margin: 									  $global-spacing !default;

$global-margin-xs: 							  $global-spacing-xs !default;
$global-margin-sm: 							  $global-spacing-sm !default;

$global-margin-lg: 							  $global-spacing-lg !default;
$global-margin-xl: 							  $global-spacing-xl !default;


// Border radius
// -----------------------------------------------------------------------------

$global-radius:          0 !default;
$radius-normal:          2px !default;
$radius-lg:              5px !default;
$radius-sm:              1px !default;

$global-rounded:          1000px !default;
$global-square:            0 !default;



// Responsive variables
// =============================================================================

// Breakpoint
// -----------------------------------------------------------------------------

$breakpoint-small:            640px;  // 0 - 640px
$breakpoint-medium:           1024px; // 641 - 1024px
$breakpoint-large:            1280px; // 1025 - 1280px
$breakpoint-xl:               1440px; // 1281 - 1440px
$breakpoint-xxl:              1920px; // 1441 -1920px

$breakpoint-small-max:         $breakpoint-small !default;
$breakpoint-md:               $breakpoint-small-max; // legacy var, DO NOT USE IT

$breakpoint-medium-min:        ($breakpoint-small + 1) !default;
$breakpoint-medium-max:        $breakpoint-medium !default;

$breakpoint-large-min:         ($breakpoint-medium + 1) !default;
$breakpoint-large-max:         $breakpoint-large !default;

$breakpoint-xl-min:            ($breakpoint-large + 1) !default;
$breakpoint-xl-max:            $breakpoint-xl !default;

$breakpoint-xxl-min:           ($breakpoint-xl + 1) !default;
$breakpoint-xxl-max:           $breakpoint-xxl !default;


// Media Queries
// NOTE '~' in the beginning - media query must be escaped
// -----------------------------------------------------------------------------

$screen:         unquote("only screen") !default;

$landscape:      unquote("#{$screen} and (orientation: landscape)") !default;
$portrait:       unquote("#{$screen} and (orientation: portrait)") !default;

$small-up:       unquote("#{$screen}") !default;
$small-only:     unquote("#{$screen} and (max-width: #{$breakpoint-small-max})") !default;

$medium-up:      unquote("#{$screen} and (min-width:#{$breakpoint-medium-min})") !default;
$medium-only:    unquote("#{$screen} and (min-width:#{$breakpoint-medium-min}) and (max-width:#{$breakpoint-medium-max})") !default;

$large-up:       unquote("#{$screen} and (min-width:#{$breakpoint-large-min})") !default;
$large-only:     unquote("#{$screen} and (min-width:#{$breakpoint-large-min}) and (max-width:#{$breakpoint-large-max})") !default;

$xl-up:          unquote("#{$screen} and (min-width:#{$breakpoint-xl-min})") !default;
$xl-only:        unquote("#{$screen} and (min-width:#{$breakpoint-xl-min}) and (max-width:#{$breakpoint-xl-max})") !default;

$xxl-up:         unquote("#{$screen} and (min-width:#{$breakpoint-xxl-min})") !default;
$xxl-only:       unquote("#{$screen} and (min-width:#{$breakpoint-xxl-min}) and (max-width:#{$breakpoint-xxl-max})") !default;


// Grid system
// -----------------------------------------------------------------------------

$grid-columns:               12 !default;
$grid-gutter:               1rem;   // Columns padding
$grid-gutter-md:            1.5rem; // 15px
$grid-max-width:             1000px !default;


// =============================================================================
// Z-index
// =============================================================================

$global-z-index: 		        1000 !default;

$z-index-topbar-fixed:       $global-z-index !default;
$z-index-sticky:             $global-z-index + 10 !default;
$z-index-dropdown:           $global-z-index + 20 !default;
$z-index-popover:            $global-z-index + 30 !default;
$z-index-offcanvas:          $global-z-index + 90 !default;
$z-index-dimmer:             $global-z-index + 100 !default;
$z-index-modal:              $global-z-index + 110 !default;
$z-index-datepicker:         $global-z-index + 120 !default;
$z-index-pureview:           $global-z-index + 120 !default;
$z-index-nprogress:          $global-z-index + 1000 !default;

// Widgets
$z-index-navbar:             $global-z-index + 10 !default;
$z-index-header-fixed:       $global-z-index + 10 !default;
$z-index-gotop-fixed:        $global-z-index + 40 !default;
$z-index-menu:               $global-z-index + 50 !default;


// =============================================================================
// Component Common
// =============================================================================

$component-active-color:          #fff !default;
$component-active-bg:             $global-primary !default;


// =============================================================================
// Components variables
// =============================================================================

// Base
// =============================================================================

$base-background: 							$global-background !default;
$base-font-family: 					  $font-family-sans-serif !default;
$base-font-weight: 						normal !default;
$base-font-size: 							$global-font-size !default;
$base-line-height: 						$global-line-height !default;
$base-text-color: 						  $gray-dark !default;

// em element
$base-em-color: 									#D05 !default;

// ins element
$base-ins-background: 						#ffa !default;
$base-ins-color: 								$gray-dark !default;

// mark element
$base-mark-background: 					#ffa !default;
$base-mark-color: 								$gray-dark !default;

// selection
$base-selection-background: 			$global-primary !default;
$base-selection-color: 					$white !default;

$base-margin-vertical: 					$global-spacing !default;

// h1 - h6 element
$base-heading-font-weight: 				  600 !default;
$base-heading-margin-top: 						2em !default;

// hr
$base-hr-border: 								$gray-lighter !default;

// blockquote
$base-blockquote-border: 						  $global-border !default;
$base-blockquote-small-color: 					$gray-light !default;
$base-blockquote-font-size:						1.6rem; // 16px
$base-blockquote-line-height:					1.5; // 22px


// =============================================================================
// Buttons
// =============================================================================

$btn-font-weight:                 normal !default;
$btn-line-height:                 1.2 !default;
$btn-font-size:                   $global-font-size !default;

$btn-default-color:               #444 !default;
$btn-default-bg:                  #e6e6e6 !default;
$btn-default-border:              $btn-default-bg !default;

$btn-primary-color:               #fff !default;
$btn-primary-bg:                  $global-primary !default;
$btn-primary-border:              $btn-primary-bg !default;

$btn-secondary-color:             #fff !default;
$btn-secondary-bg:                $global-secondary !default;
$btn-secondary-border:            $global-secondary !default;

$btn-success-color:               #fff !default;
$btn-success-bg:                  $global-success !default;
$btn-success-border:              $global-success !default;

$btn-warning-color:               #fff !default;
$btn-warning-bg:                  $global-warning !default;
$btn-warning-border:              $btn-warning-bg !default;

$btn-danger-color:                #fff !default;
$btn-danger-bg:                   $global-danger !default;
$btn-danger-border:               $btn-danger-bg !default;

$btn-link-disabled-color:         $gray-light !default;

$btn-xs-font-size:       $font-size-xs !default;
$btn-sm-font-size:       $font-size-sm !default;
$btn-lg-font-size:       $font-size-lg !default;
$btn-xl-font-size:       2rem !default;


// =============================================================================
// Code variables
// =============================================================================

$code-color:                   #c7254e !default;
$code-bg:                      #f8f8f8 !default;
$code-font-size:               1.3rem !default;

$pre-bg:                       $code-bg !default;
$pre-color:                    $gray !default;
$pre-border:                   1px solid #dedede !default;
$pre-scrollable-max-height:    24rem !default;


// =============================================================================
// Forms
// =============================================================================

$form-font-size:     $global-font-size !default;
$form-line-height:   1.2 !default;

$form-font-size-sm:  $font-size-sm !default;
$form-font-size-lg:  $font-size-lg !default;

$input-padding:                  0.5em !default;

$input-bg:                        #fff !default;
$input-focus-bg:                  #fefffe !default;
$input-bg-disabled:               $gray-lighter !default;

$input-color:                     $gray !default;
$input-border:                    #ccc !default;
$input-border-radius:  $global-radius !default;
$input-border-focus:              $global-secondary !default;

$input-color-placeholder:         $gray-light !default;

$legend-color:                    $gray-dark !default;
$legend-border-color:             #e5e5e5 !default;


// Form states and alerts
// -----------------------------------------------------------------------------

$state-success-text:              $global-success !default;
$state-success-border:            darken($state-success-text, 5%) !default;

$state-warning-text:              $global-warning !default;
$state-warning-border:            darken($state-warning-text, 5%) !default;

$state-danger-text:               $global-danger !default;
$state-danger-border:             darken($state-danger-text, 5%) !default;


// =============================================================================
// Input-group variables
// =============================================================================

$input-group-label-bg:             $gray-lighter !default;
$input-group-label-border-color:   #ccc !default;


// =============================================================================
// Image variables
// =============================================================================

$img-border-radius:  $global-radius !default;
$img-thumbnail-padding:    2px !default;
$img-thumbnail-bg:         $white !default;
$img-thumbnail-bd-color:   $global-border !default;
$img-thumbnail-bd-radius:  $global-radius !default;


// =============================================================================
// Table variables
// =============================================================================

$table-cell-padding:        .7rem !default;
$table-cell-padding-compact:  .4rem !default;
$table-line-height:         $global-line-height !default;
$table-bg:                 transparent; // overall background-color
$table-bg-striped:          #f9f9f9 !default;
$table-bg-hover:            #e9e9e9;// #fbf6e9 !default;
$table-bg-active:           #ffd !default;
$table-border-color:       #ddd; // table and cell border

$table-primary-bg:          rgba(red($global-primary), green($global-primary), blue($global-primary), .115) !default;
$table-primary-color:       darken($global-primary, 8%) !default;

$table-success-bg:          rgba(red($global-success), green($global-success), blue($global-success), .115) !default;
$table-success-color:           $global-success !default;

$table-warning-bg:          rgba(red($global-warning), green($global-warning), blue($global-warning), .115) !default;
$table-warning-color:           $global-warning !default;

$table-danger-bg:           rgba(red($global-danger), green($global-danger), blue($global-danger), .115) !default;
$table-danger-color:            $global-danger !default;


// =============================================================================
// Article variables
// =============================================================================

$article-margin-top:                      2.4rem !default;

$article-title-font-size:                 2.8rem !default;
$article-title-line-height:               1.15 !default;
$article-title-font-weight:               normal !default;

$article-meta-font-size:                  1.2rem !default;
$article-meta-line-height:                1.5 !default;
$article-meta-color:                      $gray-light !default;

$article-lead-color:                      #666 !default;
$article-lead-font-size:                  1.4rem !default;
$article-lead-line-height:                1.5 !default;

$article-content-font-size:               1.6rem !default;

$article-divider-margin:                  2.4rem !default;
$article-divider-border:                  $gray-lighter !default;


// =============================================================================
// Badge variables
// =============================================================================

$badge-color:                  #fff !default;
$badge-link-hover-color:       #fff !default;
$badge-bg:                     $gray-light !default;

$badge-active-color:           $link-color !default;
$badge-active-bg:              #fff !default;

$badge-font-weight:            bold !default;
$badge-line-height:            1 !default;
$badge-border-radius:          0 !default;

$badge-primary-bg: 						$global-primary !default;
$badge-secondary-bg:           $global-secondary !default;
$badge-success-bg: 						$global-success !default;
$badge-warning-bg: 						$global-warning !default;
$badge-danger-bg: 						  $global-danger !default;


// =============================================================================
// Breadcrumb variables
// =============================================================================

$breadcrumb-bg:                transparent;//#f5f5f5 !default;
$breadcrumb-font-size:         85% !default;
$breadcrumb-divider-color:     #ccc !default;
$breadcrumb-active-color:      $gray-light !default;
$breadcrumb-separator:         "»" !default;


// =============================================================================
// Close variables
// =============================================================================

$close-font-weight:            bold !default;
$close-color:                  #000 !default;
$close-text-shadow:            0 1px 0 #fff !default;
$close-alt-background: 		    #eee !default;


// =============================================================================
// Comment variables
// =============================================================================

$comment-border-radius:          2px !default;
$comment-border-color:           #dedede !default;

$comment-avatar-size:            32px !default;
$comment-avatar-margin:          10px !default;

$comment-hd-bg-color:            #f8f8f8 !default;
$comment-hd-padding-vertical:    10px !default;

$comment-title-margin-btm:       8px !default;
$comment-title-font-size:        $font-size-base !default;
$comment-title-line-height:      1.2 !default;

$comment-meta-color:             $gray-light !default;
$comment-meta-font-size:         13px !default;
$comment-meta-line-height:       1.2 !default;

$comment-main-margin:  $comment-avatar-size + $comment-avatar-margin !default;
$comment-main-margin-md-up:  ($comment-avatar-size + $comment-avatar-margin) * 1.5 !default;

$comment-bd-padding:  15px !default;

$comment-list-margin-top:        $global-spacing !default;

// Highlight color
$comment-hl-border-color:        $global-secondary !default;




// =============================================================================
// List variables
// =============================================================================

$list-bg:                #fff !default;
$list-border:            #dedede !default;
$list-border-radius:  $global-radius !default;

$list-hover-bg:          #f5f5f5 !default;
$list-active-color:      $component-active-color !default;
$list-active-bg:         $component-active-bg !default;
$list-active-border:     $list-active-bg !default;

// $am-list-link-color:      $gray-dark !default;
// $am-list-link-hd-color:   $gray-darker !default;


// =============================================================================
// Nav variables
// =============================================================================

$nav-link-padding:                           0.4em 1em !default;
$nav-link-hover-bg:                          $gray-lighter !default;
$nav-link-border-radius:  $global-radius !default;

$nav-active-link-bg:                         $component-active-bg !default;
$nav-active-link-color:                      $component-active-color !default;

$nav-header-font-size:                       100% !default;
$nav-header-font-weight:                     bold !default;
$nav-header-text-transform:                  uppercase !default;
$nav-header-margin-top:                      1em !default;
$nav-header-color:                           $gray !default;

$nav-disabled-link-color:                    $gray-light !default;
$nav-disabled-link-hover-color:              $gray-light !default;


// Nav -> Tabs
// -----------------------------------------------------------------------------

$nav-tabs-border-color:                      #ddd !default;

$nav-tabs-link-hover-border-color:           $gray-lighter !default;

$nav-tabs-active-link-hover-bg:              $body-bg !default;
$nav-tabs-active-link-hover-color:           $gray !default;
$nav-tabs-active-link-hover-border-color:    #ddd !default;

$nav-tabs-justify-link-border-color:             #ddd !default;
$nav-tabs-justify-active-link-border-color:      $body-bg !default;


// =============================================================================
// Topbar variables
// =============================================================================

$topbar-height:                     50px !default;
$topbar-padding:                    0 10px !default;
$topbar-margin-bottom:              $global-spacing !default;
$topbar-padding-horizontal:         10px !default;
$topbar-padding-vertical:           10px !default;
$topbar-collapse-max-height:        280px !default;

$topbar-spacing-vertical:           8px !default;

$topbar-color:              #666 !default;
$topbar-bg:                 #f8f8f8 !default;
$topbar-border:             #ddd !default;

// default links
$topbar-link-color:                 #666 !default;
$topbar-link-hover-color:           #333 !default;
$topbar-link-active-color:          $global-primary !default;
$topbar-link-active-bg:             transparent !default;
$topbar-link-disabled-color:        #ccc !default;
$topbar-link-disabled-bg:           transparent !default;

// brand label
$topbar-brand-color:                $topbar-link-color !default;
$topbar-brand-hover-color:          darken($topbar-brand-color, 10%) !default;
$topbar-brand-hover-bg:             transparent !default;


// Inverted Topbar

// Reset inverted basics
$topbar-inverse-color:                       $gray-lighter !default;
$topbar-inverse-bg:                          $global-primary !default;
$topbar-inverse-border:                      darken($topbar-inverse-bg, 10%) !default;

// Inverted links
$topbar-inverse-link-color:                  $gray-lighter !default;
$topbar-inverse-link-hover-color:            #fff !default;
$topbar-inverse-link-hover-bg:               rgba(0, 0, 0, 0.05) !default;
$topbar-inverse-link-active-color:           $topbar-inverse-link-hover-color !default;
$topbar-inverse-link-active-bg:              rgba(0, 0, 0, 0.1) !default;
$topbar-inverse-link-disabled-color:         #444 !default;
$topbar-inverse-link-disabled-bg:            transparent !default;

$topbar-inverse-brand-color:                $white !default;
$topbar-inverse-brand-hover-color:          $white !default;
$topbar-inverse-brand-hover-bg:             transparent !default;


// =============================================================================
// Pagination variables
// =============================================================================

$pagination-margin:                     1.5rem !default;
$pagination-padding:                    0.5em 1em !default;
$pagination-line-height:                1.2 !default;
$pagination-bg:                         #fff !default;
$pagination-border:                     #ddd !default;
$pagination-color:                      $gray-light !default;

$pagination-hover-bg:                   $gray-lighter !default;

$pagination-active-bg:                  $global-primary !default;
$pagination-active-color:               #fff !default;

$pagination-disabled-color:             $gray-light !default;


// =============================================================================
// Panel variables
// =============================================================================

$panel-bg:                     $white !default;
$panel-border-radius:  $global-radius !default;
$panel-hd-padding:             .6rem 1.25rem !default;
$panel-bd-padding:             1.25rem !default;

$panel-footer-bg:              #f5f5f5 !default;
$panel-inner-border:           $global-border !default;
$panel-footer-padding:        .6rem 1.25rem !default;

$panel-default-bd:             $global-border !default;
$panel-default-hd-bg:          #f5f5f5 !default;
$panel-default-text:           #444 !default;

$panel-primary-bd:             lighten($global-primary, 5%) !default;
$panel-primary-hd-bg:          $global-primary !default;
$panel-primary-text:           #fff !default;

$panel-secondary-bd:           lighten($global-secondary, 30%) !default;
$panel-secondary-hd-bg:        rgba(red($global-secondary), green($global-secondary), blue($global-secondary), .15) !default;
$panel-secondary-text:         darken($global-secondary, 8%) !default;

$panel-success-bd:             lighten($global-success, 30%) !default;
$panel-success-hd-bg:          rgba(red($global-success), green($global-success), blue($global-success), .15) !default;
$panel-success-text:           $global-success !default;

$panel-warning-bd:             lighten($global-warning, 30%) !default;
$panel-warning-hd-bg:          rgba(red($global-warning), green($global-warning), blue($global-warning), .15) !default;
$panel-warning-text:           $global-warning !default;

$panel-danger-bd:              lighten($global-danger, 30%) !default;
$panel-danger-hd-bg:           rgba(red($global-danger), green($global-danger), blue($global-danger), .15) !default;
$panel-danger-text:            $global-danger !default;


// =============================================================================
// Progress variables
// =============================================================================

$progress-bg:                #f5f5f5 !default;
$progress-bar-color:         $white !default;
$progress-bar-font-size:     $font-size-xs !default;
$progress-bar-bg:            $global-primary !default;
$progress-bar-secondary-bg:  $global-secondary !default;
$progress-bar-success-bg:    $global-success !default;
$progress-bar-warning-bg:    $global-warning !default;
$progress-bar-danger-bg:     $global-danger !default;

$progress-height:            $line-height-computed !default;
$progress-height-xs:       .6rem !default;
$progress-height-sm:      1.2rem !default;


// =============================================================================
// Thumbnail variables
// =============================================================================

$thumbnail-padding:          2px !default;
$thumbnail-bg:               $white !default;
$thumbnail-border:           #ddd !default;
$thumbnail-border-radius:  $global-radius !default;
$thumbnail-hover-border:     $link-color !default;
$thumbnail-hover-bg:  $white !default;

$thumbnail-caption-padding:  .8rem !default;
$thumbnail-caption-color:    #333 !default;


// =============================================================================
// Utility variables
// =============================================================================

$utility-scrollable-height:  240px !default;
